/* 导入变量 */
@import './variables.scss';

/* 导入混合 */
@import './mixins.scss';

/* 导入重置样式 */
@import './reset.scss';

/* 通用样式 */

/* 文本对齐 */
.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

/* 文本溢出省略号 */
.text-ellipsis {
  @include text-ellipsis;
}

.text-ellipsis-2 {
  @include multi-line-ellipsis(2);
}

.text-ellipsis-3 {
  @include multi-line-ellipsis(3);
}

/* 字体粗细 */
.font-normal {
  font-weight: normal;
}

.font-bold {
  font-weight: bold;
}

/* 字体大小 */
.font-xs {
  font-size: $font-size-extra-small;
}

.font-sm {
  font-size: $font-size-small;
}

.font-md {
  font-size: $font-size-medium;
}

.font-lg {
  font-size: $font-size-large;
}

.font-xl {
  font-size: $font-size-extra-large;
}

/* 文本颜色 */
.text-primary {
  color: $text-color-primary;
}

.text-regular {
  color: $text-color-regular;
}

.text-secondary {
  color: $text-color-secondary;
}

.text-placeholder {
  color: $text-color-placeholder;
}

.text-theme {
  color: $primary-color;
}

.text-success {
  color: $success-color;
}

.text-warning {
  color: $warning-color;
}

.text-danger {
  color: $danger-color;
}

.text-info {
  color: $info-color;
}

/* 背景颜色 */
.bg-white {
  background-color: $background-color-white;
}

.bg-base {
  background-color: $background-color-base;
}

.bg-theme {
  background-color: $primary-color;
}

.bg-success {
  background-color: $success-color;
}

.bg-warning {
  background-color: $warning-color;
}

.bg-danger {
  background-color: $danger-color;
}

.bg-info {
  background-color: $info-color;
}

/* 边距 */
.m-0 {
  margin: 0;
}

.m-xs {
  margin: $spacing-extra-small;
}

.m-sm {
  margin: $spacing-small;
}

.m {
  margin: $spacing-base;
}

.m-lg {
  margin: $spacing-large;
}

.m-xl {
  margin: $spacing-extra-large;
}

.mt-0 {
  margin-top: 0;
}

.mt-xs {
  margin-top: $spacing-extra-small;
}

.mt-sm {
  margin-top: $spacing-small;
}

.mt {
  margin-top: $spacing-base;
}

.mt-lg {
  margin-top: $spacing-large;
}

.mt-xl {
  margin-top: $spacing-extra-large;
}

.mr-0 {
  margin-right: 0;
}

.mr-xs {
  margin-right: $spacing-extra-small;
}

.mr-sm {
  margin-right: $spacing-small;
}

.mr {
  margin-right: $spacing-base;
}

.mr-lg {
  margin-right: $spacing-large;
}

.mr-xl {
  margin-right: $spacing-extra-large;
}

.mb-0 {
  margin-bottom: 0;
}

.mb-xs {
  margin-bottom: $spacing-extra-small;
}

.mb-sm {
  margin-bottom: $spacing-small;
}

.mb {
  margin-bottom: $spacing-base;
}

.mb-lg {
  margin-bottom: $spacing-large;
}

.mb-xl {
  margin-bottom: $spacing-extra-large;
}

.ml-0 {
  margin-left: 0;
}

.ml-xs {
  margin-left: $spacing-extra-small;
}

.ml-sm {
  margin-left: $spacing-small;
}

.ml {
  margin-left: $spacing-base;
}

.ml-lg {
  margin-left: $spacing-large;
}

.ml-xl {
  margin-left: $spacing-extra-large;
}

.p-0 {
  padding: 0;
}

.p-xs {
  padding: $spacing-extra-small;
}

.p-sm {
  padding: $spacing-small;
}

.p {
  padding: $spacing-base;
}

.p-lg {
  padding: $spacing-large;
}

.p-xl {
  padding: $spacing-extra-large;
}

.pt-0 {
  padding-top: 0;
}

.pt-xs {
  padding-top: $spacing-extra-small;
}

.pt-sm {
  padding-top: $spacing-small;
}

.pt {
  padding-top: $spacing-base;
}

.pt-lg {
  padding-top: $spacing-large;
}

.pt-xl {
  padding-top: $spacing-extra-large;
}

.pr-0 {
  padding-right: 0;
}

.pr-xs {
  padding-right: $spacing-extra-small;
}

.pr-sm {
  padding-right: $spacing-small;
}

.pr {
  padding-right: $spacing-base;
}

.pr-lg {
  padding-right: $spacing-large;
}

.pr-xl {
  padding-right: $spacing-extra-large;
}

.pb-0 {
  padding-bottom: 0;
}

.pb-xs {
  padding-bottom: $spacing-extra-small;
}

.pb-sm {
  padding-bottom: $spacing-small;
}

.pb {
  padding-bottom: $spacing-base;
}

.pb-lg {
  padding-bottom: $spacing-large;
}

.pb-xl {
  padding-bottom: $spacing-extra-large;
}

.pl-0 {
  padding-left: 0;
}

.pl-xs {
  padding-left: $spacing-extra-small;
}

.pl-sm {
  padding-left: $spacing-small;
}

.pl {
  padding-left: $spacing-base;
}

.pl-lg {
  padding-left: $spacing-large;
}

.pl-xl {
  padding-left: $spacing-extra-large;
}

/* Flex布局 */
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-1 {
  flex: 1;
}

.flex-center {
  @include flex-center;
}

.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

/* 定位 */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* 圆角 */
.radius-sm {
  border-radius: $border-radius-small;
}

.radius {
  border-radius: $border-radius-base;
}

.radius-lg {
  border-radius: $border-radius-large;
}

.radius-circle {
  border-radius: $border-radius-circle;
}

/* 阴影 */
.shadow {
  @include box-shadow;
}

.shadow-light {
  @include box-shadow($box-shadow-light);
}

.shadow-dark {
  @include box-shadow($box-shadow-dark);
}

/* 其他 */
.clearfix {
  @include clearfix;
}

.overflow-hidden {
  overflow: hidden;
}

.full-width {
  width: 100%;
}

.full-height {
  height: 100%;
}

.full-screen {
  width: 100%;
  height: 100%;
} 